<!-- 货币投注报表 -->
<template>
  <SearchTable ref="SearchTableRef" :query="data.query" :list="data.list" :total="data.total" :showPanel="false" :showExport="true"
    @changeSize="changeSize" @download="getExport" @changePage="changePage" @search="getSearchList" 
    @reset="onHideDetails(true)" @changeTh="data.dialogVisible = true">
    <template #form>
      <el-form-item label="地区：">
        <el-select v-model="data.query.area" filterable placeholder="请选择">
          <el-option label="全部" value=""/>
          <el-option v-for="(item, index) in COUNTRY" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="货币：">
        <el-select v-model="data.query.currency_id" filterable placeholder="请选择">
          <el-option label="全部" :value="-1"/>
          <el-option v-for="(item, index) in data.currentList" :key="index"
            :label="item.name + ' (' + item.symbol + ')' + '-' + item.remark" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期时间：">
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
          end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" clearable :disabled-date="indexStore.disabledDateTime"/>
      </el-form-item>
    </template>
    <template #button>
      <div class="statistic flex">
        <el-button :type="data.dayIndex == 1 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(1)">今日</el-button>
        <el-button :type="data.dayIndex == 2 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(2)">昨日</el-button>
        <el-button :type="data.dayIndex == 3 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(3)">上周</el-button>
        <el-button :type="data.dayIndex == 4 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(4)">本周</el-button>
        <el-button :type="data.dayIndex == 5 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(5)">本月</el-button>
        <el-button :type="data.dayIndex == 6 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(6)">上月</el-button>
        <el-button v-if="!indexStore.is_general_agent" type="warning" @click="data.query.is_usdt_show = data.query.is_usdt_show?0:1,getSearchList()">{{ data.query.is_usdt_show?'取消换算':'换算USDT' }}</el-button>
      </div>
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
          :sortable="item.sortable ? true : false" show-overflow-tooltip>
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                {{ item.tips }}
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'currency_id'" #default="scope">
            <span v-if="scope.row.currency_id">{{ scope.row.currency_data.name }}({{ scope.row.currency_data.symbol }})-{{ scope.row.currency_data.remark }}</span>
            <span v-else> 合计 </span>
          </template>
          <template v-if="item.prop == 'game_bet'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.game_bet) }}</span>
          </template>
          <template v-if="item.prop == 'game_income'" #default="scope">
            <span :class="colorClass(scope.row.game_income)" >{{ BigWan(scope.row.game_income) }}</span>
          </template>
          <template v-if="item.prop == 'currency_rate'" #default="scope">
            {{ scope.row.currency_rate?scope.row.currency_rate:'-' }}
          </template>
        </el-table-column>
      </template>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false" @resetData="resetData" />
  <!-- 导出 -->
  <PdfExport ref="PdfExportRef" :title="indexStore.BackOperator+'账单'" :show="data.isShowExport" @onHideDetails="onHideDetails"/>
</template>

<script lang="ts" setup>
import { reactive, onMounted, onUpdated } from 'vue'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import PdfExport from '@/components/PdfExport.vue'
import { exportToExcel } from '@/utils/export'
import { throttle, colorClass } from '@/utils/index'
import { COUNTRY } from '@/config/country'
import { getDateDay, getWeek, getMonth, setTimeValue } from '@/utils/time'
import { BigWan } from '@/utils/math'
import { getCurrencyStatement,getMerchantReportCurrency } from '@/api/instrument'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    agent_id: -1,
    currency_id: -1,
    area: '',
    operated_id: -1,
    is_usdt_show: 0,
    date: [getDateDay(0), getDateDay(0)]
  },
  list: [],
  total: 0,
  dayIndex: 1,
  fields: [
    { label: '日期', prop: 'date', width: '200', visible: true },
    { label: '币种', prop: 'currency_id', width: '', visible: true, tips: '游戏结算所使用的货币' },
    { label: '商户数量', prop: 'agent_num', width: '120', visible: true, tips: '以此货币结算的商户的数量', sortable: false },
    { label: '投注额', prop: 'game_bet', width: '', visible: true, tips: '游戏的押投注额度展示' },
    { label: '输赢', prop: 'game_income', width: '', visible: true, tips: '查询日期的输赢情况正为盈利、负为亏损' },
    { label: '投注人数', prop: 'valid_user', width: '180', visible: true, tips: '在游戏进行投注行为的人数' },
    { label: '投注次数', prop: 'game_count', width: '180', visible: true, tips: '在游戏进行投注行为的人数投注的次数' },
    { label: '汇率', prop: 'currency_rate', width: '120', visible: true, tips: '货币跟USDT的结算汇率' },
  ],
  dialogVisible: false,
  isShowExport: false,
  exportLoading: false,
  dataType: 'slot_son',
  checkedItem: {} as any,
  currentList:[] as any[]
})

onMounted(async () => {
  data.query = indexStore.setQueryCache(data.query,'get')
  getCurrencyList()
  getSearchList()
})
onUpdated(() => {
  indexStore.setQueryCache(data.query,'set')
})

const getSearchList = async () => {
  data.query = setTimeValue(data.query)
  let res = await getCurrencyStatement(data.query);
  res.data?.forEach((item: any,index:number) => {
    item.date = data.query.date[0] + ' ~ ' + data.query.date[1]
    if(!index){
      item.className = 'info-row'
    }
  })
  data.list = res.data
}

// 商户使用货币
const getCurrencyList = async () => {
  let res = await getMerchantReportCurrency({});
  data.currentList = res.data
}

// 设置快捷查询时间
const changeTime = throttle((type: number) => {
  if (data.dayIndex == type) return false
  data.dayIndex = type
  switch (type) {
    case 1:
      data.query.date = [getDateDay(0), getDateDay(0)]
      break;
    case 2:
      data.query.date = [getDateDay(-1), getDateDay(-1)]
      break;
    case 3:
      data.query.date = getWeek(-1)
      break;
    case 4:
      data.query.date = getWeek(0)
      break;
    case 5:
      data.query.date = getMonth(0)
      break;
    case 6:
      data.query.date = getMonth(-1)
      break;
  }
  getSearchList()
}, 1000)

// 导出
const getExport = async () => {
  let query = JSON.parse(JSON.stringify(data.query));
  query.page = 1
  query.size = 10000

  let res = await getCurrencyStatement(query),exchange = 1;
  res.data.forEach((item:any) => {
    item.date = data.query.date[0] + ' ~ ' + data.query.date[1]
  })
  let dataList = res.data

  let header: string[] = []
  let list: never[][] = []

  data.fields.forEach((item) => {
    header.push(item.label)
  })

  dataList.forEach((item: { [x: string]: any }, index: any) => {
    let arr: never[] = []
    data.fields.forEach((x) => {
      switch (x.prop) {
        case 'date':
          arr.push(data.query.date[0] + ' ~ ' + data.query.date[1] as never)
          break
        case 'currency_id':
          arr.push((item['currency_id']?item['currency_data'].name+'('+item['currency_data'].symbol+')'+'-'+item['currency_data'].remark:'合计') as never)
          break
        case 'game_bet':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'game_income':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'currency_rate':
          arr.push((item[x.prop]?item[x.prop]:'-') as never)
          break
        default:
          arr.push(item[x.prop] as never)
          break
      }
    })
    list.push(arr)
  })
  exportToExcel(list, header, '货币投注报表')
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const onHideDetails = (show: boolean) => {
  data.isShowExport = false
  if (show) {
    data.query = {
      page: 1,
      size: 50,
      area: '',
      agent_id: -1,
      operated_id: -1,
      currency_id: -1,
      is_usdt_show: 0,
      date: [getDateDay(0), getDateDay(0)]
    }
    getSearchList()
  }
}
</script>

<style scoped lang="scss"></style>